import { render } from "preact";
import { html } from "htm/preact";

import { AppWrapper, useAppContext } from "./stores/app.store.js";
import Header from "./layout/header.layout.js";

import Glossary from "./pages/glossary.page.js";
import Phonology from "./pages/phonology.page.js";
import Grammar from "./pages/Grammar.page.js";

function App(props) {
  const context = useAppContext();

  const content = () => {
    switch (context.tab) {
      case 0:
        return html`<${Phonology} />`;
      case 1:
        return html`<${Glossary} />`;
      case 2:
        return html`<${Grammar} />`;
      default:
        return html`<${Phonology} />`;
    }
  };

  return html`<div class="container">
    <${Header} />
    <${content} />
    <footer></footer>
  </div>`;
}

render(html`<${AppWrapper}><${App} name="мир" /><//>`, document.body);
